<h2 class="crayons-subtitle-1"><%= t("views.admin.users.reports.subtitle", user: @user.name, num: @related_reports.count) %></h2>

<% unless @related_reports.empty? %>
  <div class="pt-3">
    <% @related_reports.each do |report| %>
      <article class="c-list-item c-list-item--interactive flex justify-between gap-4">
        <div class="w-100">
          <header>
            <h3 class="crayons-subtitle-2 w-100 flex items-center justify-between">
              <span class="flex gap-3">
                <a href="<%= admin_report_path(report.id) %>" class="c-link">
                  <%= t("views.admin.users.reports.category.#{report.category}", default: report.category.capitalize) %>
                </a>
                <span class="c-indicator c-indicator--relaxed  <%= "c-indicator--danger" if report.status.casecmp("open").zero? %> <%= "c-indicator--success" if report.status.casecmp("resolved").zero? %>">
                  <%= t("views.admin.users.reports.status.#{report.status}", default: report.status) %>
                </span>
              </span>
              <time datetime="<%= report.created_at&.strftime("%Y-%m-%dT%H:%M:%S%z") %>" class="color-secondary fs-s shrink-0 fw-normal" title="<%= l(report.created_at, format: :admin_user) if report.created_at %>">
                <%= l(report.created_at, format: :short_with_yy) if report.created_at %>
              </time>
            </h3>
          </header>
          <p class="mb-1"><%= report.message %></p>
          <p class="fs-s color-secondary"><%= t("views.admin.users.reports.for_html", url: link_to(report.reported_url, report.reported_url, class: "c-link", target: "_blank", rel: "noopener")) %></p>
        </div>
      </article>
    <% end %>
  </div>
<% else %>
  <div class="align-center flex flex-col justify-center my-auto py-8">
    <h3 class="crayons-subtitle-2 mb-2"><%= t("views.admin.users.reports.empty1") %></h3>
    <p class="color-secondary"><%= t("views.admin.users.reports.empty2", user: @user.name) %></p>
  </div>
<% end %>
